<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href=http://at.alicdn.com/t/font_1308130_7e0z85s0d6u.css>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/index.js"></script>



</head>
<body>
    
    <div class="head">
        <div class="header">
       <div class="head-first"><span>小米网&nbsp|&nbspMIUI&nbsp|&nbsp米聊&nbsp|&nbsp游戏&nbsp|&nbsp多看阅读&nbsp|&nbsp云服务&nbsp|&nbsp小米网移动版&nbsp|&nbspSelect region&nbsp|&nbsp米粉节答疑&nbsp</span>
       </div>
       <div class="head-child"><span>&nbsp注册&nbsp|&nbsp登录&nbsp</span></div> 
        </div>
    </div>
    <div class="top">
        <img src="images/logo.png">
        <div class="seek">
                <span>  <i class="iconfont adm">&#xe723;4月4日开放购买</i></span> 
        <div class="seek-child"> <input type="text" placeholder="搜索您需要的商品"><button class="search"><i class="iconfont">&#xe611;</i></button>     
            <button class="car"><i class="iconfont ">&#xe600;&nbsp;&nbsp;</i>购物车</button></div>  
            </div>
    </div>

<div class="content">
    <div class="menu-left">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;全部商品分类</p>
        <ul>
            <li class="menu-first"><a href="#">购买手机</a></li>
            <li class="menu-child"><a href="#">小米Noto</a> <a href="#">小米4</a> <a href="#">红米Noto</a></li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">购买电视与平板</a></li>
            <li class="menu-child"><a href="#">小米电视</a>  <a href="#">小米盒子</a> <a href="#">小米平板</a></li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">路由器与智能硬件</a></li>
            <li class="menu-child"><a href="#">路由器</a>  <a href="#">体重秤</a>   <a href="#">净化器与滤芯</a></li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">插线板 移动电源与电池</a></li>
            <li class="menu-child"><a href="#">小米移动电源</a>  <a href="#">电池</a> <a href="#">充电器</a> </li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">耳机音箱与存储卡</a></li>
            <li class="menu-child"><a href="#">小米头戴式耳机</a>   <a href="#">小米活塞耳机</a></li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">保护套与贴膜</a></li>
            <li class="menu-child"><a href="#">保护套/保护壳 </a>  <a href="#">贴膜</a> <a href="#"> 防尘塞</a> </li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">后盖与个性化配件</a></li>
            <li class="menu-child" ><a href="#">小米头戴式耳机</a>  <a href="#">小米活塞耳机</a></li>
        </ul>
        <ul>
            <li class="menu-first"><a href="#">小米生活方式</a></li>
            <li class="menu-child"><a href="#">服装</a>  <a href="#">米兔</a>  <a href="#">背包</a>  <a href="#">生活周边</a></li>
        </ul>
    </div>
    <div class="menu-right">
        <a href="#">首页</a><a href="#">小米手机</a> <a href="#">红米</a><a href="#">小米平板</a><a href="#">小米电视</a><a href="#">盒子</a><a href="#">路由器</a><a href="#">合约机</a> <a href="#">服务</a><a href="#">社区</a> 
    </div>
    <div class="huadong">
    <div class="banner">
        <div class="content">
            <img src="images/banner1.png" alt="">
            <img src="images/banner2.png" alt="">
            <img src="images/banner3.png" alt="">
            <img src="images/banner4.png" alt="">
            <img src="images/banner5.png" alt="">
           
        </div>

        <button class="prev position-center-y"></button>
        <button class="next position-center-y"></button>
        <div class="all-icons">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>  
        </div>
    </div>

        <div class="price">
        <div  class="price-row">
            <img src="images/01.png">
        </div>
        <div price-row>
            <img src="images/02.png">
        </div>
        <div price-row>
            <img src="images/03.png">
        </div>
    </div>
</div>
</div>
   <div class="star">
       <span>小米明星单品</span>
       <span>根据机型选配件</span>
       <img class="tubiao" src="images/05.png">
       <img  class="tubiao1"src="images/06.png">
   
    <div class="box">
        <div class="box-one">
            <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg">
            <p>小米智能插座</p>
            <p class="box-word">让普通加点变智能</p>
        </div>
        <div class="box-one">
            <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg">
            <P>小米空气进化器</P>
            <P class="box-word">高性能智能空气净化器立即预约</P>
        </div>
        <div class="box-one">
            <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg">
                <p>小米活塞耳机简装版</p>
                <p class="box-word">好声音源自活塞式音腔，延续经典设计</p>
        </div>
        <div class="box-one">
            <img src="images/aa.jpg">
            <p>小米路由器</p>
            <p class="box-word">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
        </div>
    </div>
        <div class="xinpin">
            <span>新品发布</span><span class="xinpin-right">更多&gt</span>
        </div>


        <div class="main">
            <div class="yinxiang">
                <img class="fanghezi" src="images/fanghezi0407xiao.jpg">  
            <div class="shouhuan"  > <img  src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg">  
                <P>手环手表<br>79元</P>
                </div>
            <div class="main-child">
                <div class="main-child-one">
                   <div class="mitu"><img src="images/yaoshi.png">
                    <P>五周年米兔钥匙扣<br>9.9元</P></div> 
                    <div class="lanya"><img src="images/lanyaerji.png">
                    <P>QCY派Q8蓝牙耳机<br>59.9元</P></div>
                </div>
                <div class="main-child-nd">
                    <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg">
                    <P>小米T恤路标MILOGO<br>39元</P>
                </div>
                <div class="main-child-rd">
                    <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg">
                    <P>小米4实木后盖<br>69元</P>
                </div>
            </div>
            <div class="main-child">
                    <div class="main-child-st">
                        <img src="images/baohuke.png">
                        <P>小米note超薄手机壳<br>49元</P>
                    </div>
                    <div class="main-child-nd">
                        <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg">
                        <P>小米自拍干<br>49元</P>
                    </div>
                    <div class="main-child-rd">
                        <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg">
                        <P>先锋CL31系列耳式耳机<br>99元</P>
                    </div>
                </div>
        </div>
    <div class="main-left">
        <div class="main-left-top">
    <button>特价商品</button><br>
    <br>
        <p >SanDisk32GB存储卡</p>
        <p>79元</p>
        <p>还有更多特价商品</p>
        <img src="images/T1ByZTBjJT1RXrhCrK.jpg">
        </div>
        <div class="main-left-top">
            
            <p class="main-word">特惠配件套餐</p>
            <p>手机必备配件组合购买</p>
            <p>实惠更优惠</p>
            <img src="images/channel-list-cool.jpg">
        </div>
        <div class="main-left-top">
            <p class="main-word">我爱酷玩</p>
            <p>邂逅炫酷的电子产品</p>
            <p>结交趣味相投的朋友</p>
            <img src="images/channel-list-new.jpg">
        </div>
        <div class="user">
            <p><a href ="#">企业用户采购通道</a> <a class="gt" href="#">></a></p>
            <hr>
            <p><a href ="#">小米手机防伪查询<a class="gt" href="#">></a></a></p>
            <hr>
            <p><a href ="#">小米手机官翻版 &nbsp;&nbsp;</a><a class="gt" href="#">></a></p>
            <hr>
            <p><a href ="#">小米路由器官翻版</a><a class="gt" href="#">></a></p>
            <hr>
            <p><a href ="#">米粉红包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a  class="gt" href="#">></a></p>
            <hr>
        </div>
        <div class="pay">
            <p>话费充值</p>
            <input type="text" placeholder="请输入手机号"><br>
            <select>
                <option>100元</option>
                <option>200元</option>
                <option>300元</option>
            </select>
            <br>
            <br>
          
            <p>实付价格98.4元起</p>
            <button>立即充值</button>
        </div>
    </div>
</div>
</div>
<div class="foot">
    <div class="foot-container">
        <div class="foot-first">
            <div class="foot-one">
                <img src="images/10.png">
                <p>1小时快修服务</p>
            </div>
            <div class="foot-one">
                <img src="images/11.png">
                <p>7天无理由退货</p>
            </div>
            <div class="foot-one">
                <img src="images/12.png">
                <p>15天免费换货</p>
            </div>
            <div class="foot-one">
                <img src="images/13.png">
                <p>满150元包邮</p>
            </div>
            <div class="foot-one">
                <img src="images/14.png">
                <p>520余家售后网店</p>
            </div>
        </div>
        <div class="foot-child">
          <div class="foot-two">
            <ul>
                <li ><a class="foot-word" href="#">帮助中心</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">支付方式</a></li>
                <li><a href="#">配送方式</a></li>
            </ul>
            </div>
        <div class="foot-two">
            <ul>
                <li><a class="foot-word" href="#">服务支持</a></li>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">自助服务</a></li>
                <li><a href="#">相关下载</a></li>
            </ul>
        </div>
        <div class="foot-two">
            <ul>
                <li><a  class="foot-word" href="#">小米之家</a></li>
                <li><a href="#">小米之家</a></li>
                <li><a href="#">服务网店</a></li>
                <li><a href="#">预约亲临到店服务</a></li>
            </ul>
        </div>
        <div class="foot-two">
            <ul>
                <li><a  class="foot-word" href="#">关于小米</a></li>
                <li><a href="#">了解小米</a></li>
                <li><a href="#">加入小米</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="foot-two">
            <ul>
                <li><a class="foot-word" href="#">关注我们</a></li>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">小米部落</a></li>
                <li><a href="#">官方微信</a></li>
            </ul>
        </div>
        <div class="phone">
            <p> 400-100-5678</p>
            <p>周一至周日8:00-18:00</p>
            <p> 仅收市话费</p>
            <button>24小时在线客服</button>
        </div>
     </div>

        <div class="foot-third">
            <p>小米旗下网站&nbsp;|&nbsp;小米网&nbsp;|&nbsp;&nbsp;MIUI&nbsp;|&nbsp;米聊&nbsp;| &nbsp;多看书城&nbsp; |
                    &nbsp;小米路由器 &nbsp; |&nbsp;繁体香港&nbsp; | &nbsp;繁体台湾&nbsp; | &nbsp;Enlish &nbsp;|&nbsp; 小米后院&nbsp;|
                 &nbsp;小米天猫店 &nbsp;| &nbsp;小米淘宝直营店&nbsp;|&nbsp;小米网盟</p>
            <p>@mi.com 京ICP110507号 京ICP备10046444号 京公网
                安备1101080212535号  京网文[2014]0059-0009号
            </p>
        </div>
        <div class="last">
            <img src="images/16.png">       <select>
                    <option>简体中文</option>
                    <option>英文</option>
                    <option>韩文</option>
                </select>
        </div>
    </div>
    </div>
</div>

</body>
</html>